<template>
  <div>
    <el-row>
      <el-form ref="form" :model="form" :rules="rules" label-width="150px">
        <el-col :span="12">
          <el-form-item label="客户名称" prop="customerId">
            <el-select
              v-model="form.customerId"
              filterable
              placeholder="请选择客户名称"
              style="width: 100%"
              @change="getOrderByCustomerIdAndProgress()"
            >
              <el-option
                v-for="customer in customerList"
                :key="customer.customerId"
                :label="customer.customerName"
                :value="customer.customerId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商机" prop="orderId">
            <el-select
              v-model="form.orderId"
              filterable
              placeholder="请选择商机"
              style="width: 100%"
            >
              <el-option
                v-for="item in orderList"
                :key="item.orderId"
                :label="item.orderName"
                :value="item.orderId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="研发人员" prop="devUserId">
            <el-select
              v-model="form.devUserId"
              placeholder="请选择"
              multiple
              style="width: 100%"
              filterable
            >
              <el-option
                v-for="item in devExpertList"
                :key="item.expertId"
                :label="item.expertName"
                :value="item.expertId"
              >
                <span style="float: left">{{ item.expertName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">
                  <dict-tag
                    :options="dict.type.crm_expert_type"
                    :value="item.expertType"
                  />
                </span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="实施人员" prop="opsUserId">
            <el-select
              v-model="form.opsUserId"
              placeholder="请选择"
              multiple
              style="width: 100%"
              filterable
            >
              <el-option
                v-for="item in opsExpertList"
                :key="item.expertId"
                :label="item.expertName"
                :value="item.expertId"
              >
                <span style="float: left">{{ item.expertName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">
                  <dict-tag
                    :options="dict.type.crm_expert_type"
                    :value="item.expertType"
                  />
                </span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="立项表研发工单" prop="devEstimateTaskCount">
            <el-input
              v-model="form.devEstimateTaskCount"
              type="number"
              style="width: 100%"
              placeholder="请输入预计工单天数"
            >
              <template slot="append">天</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="立项表实施工单" prop="opsEstimateTaskCount">
            <el-input
              v-model="form.opsEstimateTaskCount"
              type="number"
              style="width: 100%"
              placeholder="请输入预计工单天数"
            >
              <template slot="append">天</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="项目归属" prop="projectType">
            <el-select
              v-model="form.projectType"
              style="width: 100%"
              placeholder="请选择项目归属"
              filterable
            >
              <el-option
                v-for="dict in dictList"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="form.remark"
              type="textarea"
              placeholder="请输入内容"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item class="dialog-footer">
            <el-button type="primary" @click="submitForm('1')">确 定</el-button>
            <el-button type="info" @click="submitForm('0')" v-if="buttonFlag">暂 存</el-button>
            <el-button @click="cancel">取 消</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import {
  addProject,
  updateProject,
  getProject,
  getProjectByStatus,
} from "@/api/crm/project";
import { getOrderListAll } from "@/api/crm/order";
export default {
  name: "addOrUpdateProject",
  dicts: ["crm_expert_type"],
  props: {
    customerList: {
      type: Array,
      default: [],
    },
    devExpertList: {
      type: Array,
      default: [],
    },
    opsExpertList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      form: {},
      orderList: [],
      dictList: [],
      rules: {
        customerId: [
          { required: true, message: "客户不能为空", trigger: "change" },
        ],
        orderId: [
          { required: true, message: "商机不能为空", trigger: "change" },
        ],
        devEstimateTaskCount: [
          {
            required: true,
            message: "预计开发工单不能为空",
            trigger: "bulr",
          },
        ],
        opsEstimateTaskCount: [
          {
            required: true,
            message: "预计实施工单不能为空",
            trigger: "bulr",
          },
        ],
        projectType: [
          { required: true, message: "项目归属不能为空", trigger: "change" },
        ],
      },
      buttonFlag: false
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.dictList = this.getGroupData();
    },
    getOrderByCustomerIdAndProgress() {
      this.form.orderId = null;
      getOrderListAll({ customerId: this.form.customerId }).then((res) => {
        this.orderList = res.data;
      });
    },
    async getProject(projectId) {
      this.reset();
      await getOrderListAll({ customerId: this.form.customerId }).then((res) => {
          this.orderList = res.data; 
        });
      if (projectId) {
        await getProject(projectId).then((response) => {
          this.form = response.data;
          this.buttonFlag = false
        });
      } else {
        await getProjectByStatus({ status: "0" }).then((res) => {
          this.buttonFlag = true
          this.form = res.data || {
            projectId: null,
            orderId: null,
            customerId: null,
            userId: null,
            opsUserId: null,
            devUserId: null,
            createBy: null,
            createTime: null,
            updateBy: null,
            updateTime: null,
            remark: null,
          };
        });
      }

      if (this.form.opsUserId) {
        this.form.opsUserId = this.form.opsUserId.split(",");
      }
      if (this.form.devUserId) {
        this.form.devUserId = this.form.devUserId.split(",");
      }
    },

    /** 提交按钮 */
    submitForm(status) {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.form.status = status;
          let obj = JSON.parse(JSON.stringify(this.form));
          if (this.form.opsUserId) {
            obj.opsUserId = this.form.opsUserId.join(",");
          }
          if (this.form.devUserId) {
            obj.devUserId = this.form.devUserId.join(",");
          }
          if (this.form.projectId != null) {
            updateProject(obj).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.cancel();
            });
          } else {
            addProject(obj).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.cancel();
            });
          }
        }
      });
    },
    // 取消按钮
    cancel() {
      this.reset();
      this.$emit("cancel");
    },
    // 表单重置
    reset() {
      this.form = {
        projectId: null,
        orderId: null,
        customerId: null,
        userId: null,
        opsUserId: null,
        devUserId: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
      };
      this.resetForm("form");
    },
  },
};
</script>
